<template>
	<div class="mui-content">
		<div class="addr-tips">为了礼品尽快达到您手中，请填写详实的收货人信息</div>
		<form class="mui-input-group">
			<div class="mui-input-row">
				<label for="">收货人</label>
				<input type="text" class="mui-input-clear" placeholder="请输入收货人姓名" v-model="name">
			</div>
			<div class="mui-input-row">
				<label for="">联系方式</label>
				<input type="tel" class="mui-input-clear" placeholder="请输入联系电话" v-model="tel" pattern="[0-9]*" maxlength="11" oninput="if(value.length>11)value=value.slice(0,11)">
			</div>
			<div class="mui-input-row">
				<label for="">收货地址</label>
				<input type="text" class="mui-input-clear" @click="selectAddr" placeholder="请选择地区" v-model="addr" id="addr">
			</div>
			<div class="mui-input-row">
				<label for="">详细地址</label>
				<input type="text" class="mui-input-clear" placeholder="请输入街道/小区/门牌号" v-model="addrDetl">
			</div>
		</form>
		<div class="addr-submit" @click="checkForm">提交</div>
	</div>
</template>
<style>
	.addr-tips{margin:5px 10px 15px 10px;font-size:14px;color:#999;}
	.mui-input-group{font-size:14px;}
	.addr-submit{margin:15px 10px;padding:6px 0;background:#2081f8;color:#fff;text-align:center;border-radius:2px;}
</style>
<script type="es6">
	import Page from '../../base/Page'
	import Picker from '../../components/picker/picker.vue';
	import cityData3 from '../../components/picker/city.data-3.js';
	import mui from '../../common/mui.js';
	import {API} from '../../config/constants';
	export default new Page({
		data(){
			return{
				name:'',
				tel:'',
				addr:'',
				addrDetl:''
			}
		},
		methods:{
			selectAddr:function(){
				var that = this;
				document.getElementById('addr').blur();
				var picker = new mui.PopPicker({
					layer:3
				});
				picker.pickers[0].setSelectedIndex(9);
				picker.pickers[1].setSelectedIndex(1);
				picker.pickers[2].setSelectedIndex(5);
				picker.setData(cityData3);
				picker.show(function(item){
					document.getElementById('addr').value = (item[0]||{}).text+(item[1]||{}).text+(item[2]||{}).text;
					that.addr=(item[0]||{}).text+(item[1]||{}).text+(item[2]||{}).text;
				});
			},
			checkForm:function(){
				//let that = this;
				let numbers = /^1[34578]\d{9}$/;
                let val = this.tel.replace(/\s+/g,"");
				if(!this.name||!this.tel||!this.addr||!this.addrDetl){
					mui.toast('请完善信息',{duration:'short', type:'div'});
				}else if(!numbers.test(val) || val.length ==0){
					mui.toast('请填写正确的手机号');
                    return false;
				}else{
					this.post(API.POST_ACTIVITY_ADDR,
						{
							activityCondId:this.$route.params.id,
							deliveryContact:this.name,
							deliveryContactPhone:this.tel,
							deliveryAddress:this.addr+this.addrDetl
						},res=>{
							if(res.resultMsg&&res.code==200){
								this.$route.router.go('/tip/success/confirmAddr')
							}else if(res.code == 951){
								mui.toast('抱歉，您未中奖',{duration:'short', type:'div'})
							}else if(res.code == 952){
								mui.toast('抱歉，不能重复领取',{duration:'short', type:'div'})
							}else if(res.code == 953){
								mui.toast('抱歉，礼品已领完',{duration:'short', type:'div'})
							}
						}
					)
				}
				
			}
		},
		components:{
			Picker
		}
	})
	
</script>
	
